$(function(){
    initEvent();
    $("#time").click(function(e) {
    });
    $("#restart").click(function(e) {
        if ($("#restart").val() == "Start") {
            $("#tip").hide();
            $("#time").show();
            timeStart();
        } else {
            window.location.reload();
        }
    });
});

function timeStart() {
    if (isComplete) {
        return;
    }
    var node = $("#time");
    var val = node.text();
    if (val == "Start") {
        node.text("1s");
    } else {
        var time = parseInt(val, 10);
        time++;
        node.text(time + "s");
    }
    setTimeout("timeStart()", 1000);
}

var isMoving = false, pos;
var toMaxRight, toMinTop, pastMinLeft, pastMinTop;
var isComplete = false;

function initEvent() {
    var basket_one_pos = $('#basket_one').offset();
    toMaxRight = basket_one_pos.left + 300 - 82;
    toMinTop = basket_one_pos.top - 100;
    var basket_two_pos = $('#basket_two').offset();
    pastMinLeft = basket_two_pos.left;
    pastMinTop = basket_two_pos.top - 100;
    $(document).on('touchstart mousedown', '.apple', handle_mousedown);
    document.addEventListener('touchmove', function(e) {
        if (e.target.className !== "apple") {
            e.preventDefault();
        }
    }, { passive: false });
    $("#btn_start").click(function(e) {
        $("#mask").hide();
    });
}

function handle_mousedown(e){
    isMoving = true;
    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    if (!e.pageX) {
        my_dragging.pageX0 = e.originalEvent.touches[0].pageX;
    }
    my_dragging.pageY0 = e.pageY;
    if (!e.pageY) {
        my_dragging.pageY0 = e.originalEvent.touches[0].pageY;
    }
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).offset();
    my_dragging.pos = $(this).attr("data-pos");
    my_dragging.isOK = false;
    function handle_dragging(e){
        let tempPageX = e.pageX;
        if (!tempPageX) {
            tempPageX = e.originalEvent.touches[0].pageX;
        }
        let tempPageY = e.pageY;
        if (!tempPageY) {
            tempPageY = e.originalEvent.touches[0].pageY;
        }
        //console.log(my_dragging.offset0.left, tempPageX, my_dragging.pageX0);
        var left = my_dragging.offset0.left + (tempPageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (tempPageY - my_dragging.pageY0);
        //console.log(left,top);
        $(my_dragging.elem)
        .offset({top: top, left: left});
        if (isMoving) {
            var isLeft = false, isRight = false;
            var cleft = $(my_dragging.elem).offset().left;
            var ctop = $(my_dragging.elem).offset().top;
            if (cleft <= toMaxRight && ctop >= toMinTop) {
                isLeft = true;
            }
            if (cleft >= pastMinLeft && ctop >= pastMinTop) {
                isRight = true;
            }
            if ((my_dragging.pos == "left" && isLeft) ||
                (my_dragging.pos == "right" && isRight)) {
                my_dragging.isOK = true;
            } else {
                my_dragging.isOK = false;
            }
            //console.log(cleft + "("+toMaxRight+")", ctop + "("+toMinTop+")", my_dragging.pos, my_dragging.isOK);
            $(my_dragging.elem).attr('data-ok', my_dragging.isOK);
        }
    }
    function handle_mouseup(e){
        $('body')
        .off('mousemove touchmove', handle_dragging)
        .off('mouseup touchend', handle_mouseup);
        isMoving = false;
        var isOK = $(my_dragging.elem).attr('data-ok') == 'true';
        if (!isOK) {
            $(my_dragging.elem)
                .css({
                    left: $(my_dragging.elem).attr('data-left') + "px",
                    top: $(my_dragging.elem).attr('data-top') + "px"});
            $("#no_voice")[0].play();
        } else {
            $("#good_voice")[0].play();
            isComplete = true;
            var apples = $('.apple');
            for(var i = 0; i < apples.length; i++) {
                if ($(apples[i]).attr('data-ok') != 'true') {
                    isComplete = false;
                }
            }
            if (isComplete) {
                $("#restart").val("Restart")
                $("#tip").show();
                $("#time").hide();
            }
        }
        //console.log(isOK);
    }
    $('body')
    .on('mouseup touchend', handle_mouseup)
    .on('mousemove touchmove', handle_dragging);
}